<script setup>
import {EditPen, User} from "@element-plus/icons-vue";
import {getUserDetail, getUserList, postSaveUser} from "@/api/admin/user";
import {reactive, ref, watchEffect} from "vue";
import {useStore} from "@/store";
import {get} from "@/net";
import {ElMessage} from "element-plus";


const store = useStore()

const editor = reactive({
    id: 0,
    display: false,
    temp: {},
    loading: false
})
const userTable = reactive({
    page: 1,
    size: 10,
    total: 0,
    data: []
})

function saveUserDetail() {
    editor.display = false
    postSaveUser(editor.temp, () => {
        const user = userTable.data.find(user => user.id === editor.id)
        Object.assign(user, editor.temp)
        ElMessage.success("数据更新完成")
    })
}

function openUserEditor(user) {
    editor.id = user.id
    editor.display = true
    editor.loading = true

    getUserDetail(user.id, data => {
        editor.temp = {...data, ...user}
        editor.loading = false
        console.info(data)
    })
}

function userStatus(user) {
    if (user.mute && user.banned)
        return '禁言、封禁'
    else if (user.mute)
        return '禁言'
    else if (user.banned)
        return '封禁'
    else
        return '正常'
}

watchEffect(() => {
    getUserList(userTable.page, userTable.size, data => {
        userTable.total = data.total;
        userTable.data = data.list;
    })
})
</script>

<template>
    <div class="user-admin">
        <div class="title">
            <el-icon>
                <User/>
            </el-icon>
            <span>用户列表</span>
            <div class="desc">
                在这里可以都所有的用户信息进行修改
            </div>
            <el-table :data="userTable.data" style="width: 100%" height="300">
                <el-table-column prop="id" label="编号" width="60"/>
                <el-table-column label="用户名" width="150">
                    <template #default="{row}">
                        <div style="height: 35px; display: flex; align-items: center;gap: 12px">
                            <el-avatar :size="35" :src="store.avatarUserUrl(row.avatar)"/>
                            <span>{{ row.username }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="角色" width="100" align="center">
                    <template #default="{row}">
                        <el-tag type="danger" v-if="row.role === 'admin'">管理员</el-tag>
                        <el-tag v-else>普通用户</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="电子邮件" width="200"/>
                <el-table-column label="注册时间" align="center">
                    <template #default="{row}">
                        <span>{{ new Date(row.registerTime).toLocaleString() }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="{row}">
                        <span>{{ userStatus(row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="{row}">
                        <el-button circle
                                   :icon="EditPen"
                                   @click="openUserEditor(row)"
                                   :disabled="row.role === 'admin'"/>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                v-model:current-page="userTable.page"
                v-model:page-size="userTable.size"
                :page-sizes="[10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="userTable.total"
            />
        </div>
        <el-drawer v-model="editor.display">
            <template #header>
                <div>
                    <div style="font-weight:bold;">
                        <el-icon>
                            <EditPen/>
                        </el-icon>
                        <span>编辑用户信息</span>
                    </div>
                    <div style="font-size: 13px">
                        <span>编辑完成后请点击下方的保存按钮</span>
                    </div>
                </div>
            </template>
            <el-form label-position="top">
                <el-form-item label="用户名">
                    <el-input v-model="editor.temp.username"/>
                </el-form-item>
                <el-form-item label="电子邮箱">
                    <el-input v-model="editor.temp.email"/>
                </el-form-item>
                <!--                <el-form-item label="状态">-->
                <!--                    <el-radio-group v-model="editor.temp.mute">-->
                <!--                        <el-radio value="1">禁言</el-radio>-->
                <!--                        <el-radio value="0">解除</el-radio>-->
                <!--                    </el-radio-group>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item label="状态">-->
                <!--                    <el-radio-group v-model="editor.temp.banner">-->
                <!--                        <el-radio value="0">封禁</el-radio>-->
                <!--                        <el-radio value="1">解除</el-radio>-->
                <!--                    </el-radio-group>-->
                <!--                </el-form-item>-->
                <div style="display: flex; font-size: 14px;gap: 20px">
                    <div>
                        <span style="margin-right: 10px;">禁言</span>
                        <el-switch v-model="editor.temp.mute"/>
                    </div>
                    <el-divider style="height: 30px" direction="vertical"/>
                    <div>
                        <span style="margin-right: 10px;">封禁</span>
                        <el-switch v-model="editor.temp.banned"/>
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <span style="margin-top: 10px; color: #606266; font-size: 14px">
                        注册时间: {{ new Date(editor.temp.registerTime).toLocaleString()}}
                    </span>
                </div>
                <el-divider />
            </el-form>
            <template #footer>
                <div style="text-align:center;">
                    <el-button type="success" @click="saveUserDetail">保存</el-button>
                    <el-button type="info" @click="editor.display = false">取消</el-button>
                </div>

            </template>
        </el-drawer>
    </div>
</template>

<style scoped>
.user-admin {
    .title {
        font-weight: bold;
    }

    .desc {
        color: #bababa;
        font-size: 13px;
        margin: 10px 0 24px 0;
    }

    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
}

:deep(.el-drawer__header) {
    margin-bottom: 0;
}
</style>